<template>
    <div class="common-layout">
      <el-container>
        <el-header style="background-color: white;height: 150px;"> 
            <div class="logo"  >
                <h3>看诊记录</h3>
            </div>
        </el-header>
        <el-main> 
            
        </el-main>
      </el-container>
    </div>
  </template>
  <script setup name="LookPatient">



</script>
 
<style scoped>
.logo {
    height: 80px;
    margin-top: 30px;
    background-color: white;
    padding-top: 10px;
    padding-left: 50px;
    border-top: 1px solid #ccc; /* 添加淡灰色边框 */
    border-bottom: 1px solid #ccc; /* 添加淡灰色边框 */
}
</style>
<template>
  <el-header  style="background-color: lightgray; text-align: right; font-size: 12px;height: 100px;">
    <el-header style="text-align: right; font-size: 12px;height: 100px;">
    <h1 style="font-size: 30px; text-align: left;">退费管理</h1>
    </el-header>
         <div class="toolbar">
        <div>系统希望您不再是本系统受众，并提醒您务必谨遵医嘱</div>
    
    <div class="sub-title"></div>

           <!-- <span>门诊挂号</span> -->
         </div>
       </el-header>
      
     <h3>精准搜索</h3>
          <el-row>
  <el-col :span="6"><div class="grid-content ep-bg-purple" />   
  <el-form-item label="病历号" prop="orderNo" class="label" >
     <el-input v-model="form.orderNo" placeholder="请输入病历号" />
   </el-form-item>
  </el-col>
  <el-col :span="8"><div class="grid-content ep-bg-purple-light" />
      <el-form-item label="姓名" prop="patientName"  class="label">
     <el-input v-model="form.patientName" placeholder="请输入您的姓名">
     </el-input>
   </el-form-item>
  </el-col>
  <el-col :span="6">
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="resetForm">重置</el-button>
  </el-col>
</el-row>
<h3>按条件筛选</h3>
  <el-row>
      <el-col :span="6">
      <el-form-item label="处方状态：" prop="fangStatus" class="label" >
     <el-select v-model="form.fangStatus" placeholder="请选择挂号状态">   
      <el-option label="全部" value="1"></el-option>
      <el-option label="待挂号" value="2"></el-option>
      <el-option label="已挂号" value="3"></el-option>
      <el-option label="已取消" value="4"></el-option>
     </el-select>
     </el-form-item>
     </el-col>
      <el-col :span="6">
     <el-form-item label="开立时间："> 
      <div class="block" >
         <el-date-picker
            v-model="value2"
      type="daterange"
      unlink-panels
      range-separator="To"
      start-placeholder="Start date"
      end-placeholder="End date"
      :shortcuts="shortcuts"
      :size="size"
      style="width: 200px;"
    />
  </div>
     </el-form-item>
  </el-col>
  <el-col :span="6">
     <el-form-item label="项目：" prop="fangStatus" class="label" >
     <el-select v-model="form.fangName" placeholder="请选择挂号状态">   
      <el-option label="全部" value="1"></el-option>
      <el-option label="待挂号" value="2"></el-option>
      <el-option label="已挂号" value="3"></el-option>
      <el-option label="已取消" value="4"></el-option>
     </el-select>
     </el-form-item>
  </el-col>
  <el-col :span="6">
      <el-button type="primary" @click="select">查询</el-button>
      <el-button type="primary" @click="resetForm">重置</el-button>
  </el-col>
  </el-row>
  <el-main>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="date" label="病历号" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column prop="oName" label="项目名称" />
          <el-table-column prop="price" label="单价" />
          <el-table-column prop="count" label="数量" />
          <el-table-column prop="beginTime" label="开立时间" />
          <el-table-column  colspan="2" label="操作" style="text-align: center">
            <el-container>
              <el-button type="primary" @click="deleteMemory"> 删除</el-button>
              <el-button type="danger" @click="noPay"> 退费</el-button>
            </el-container>
          </el-table-column>
        </el-table>
      <div class="demo-pagination-block" style="display: flex; justify-content: space-between; align-items: center;">
<div class="demonstration">
  <el-button type="primary" @click="handleCounts">批量操作: {{ tableData.length }}条</el-button> 
</div>
<el-pagination
  v-model:current-page="currentPage4"
  v-model:page-size="pageSize4"
  :page-sizes="[10, 50, 100, 200]"
  :size="size"
  :disabled="disabled"
  :background="background"
  layout="sizes, prev, pager, next, jumper"
  hide-on-single-page:true
  prev-text="上一页"
  next-text="下一页"
  jump-text="'跳至'"
  :page-count="10"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
/>
</div>
    </el-main>


 </template>
 
 <script lang="ts" setup name="Order">
import axiosInstance from '@/utils/axiosUtils';
import { ref,reactive, toRefs } from 'vue';
import type { ComponentSize } from 'element-plus'
import { ElTable } from 'element-plus'

interface User {
date: string
name: string
address: string
}
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
}
const handleCounts = () => {
console.log('批量操作')
}
const value2 = ref('')
const shortcuts = [
{
  text: 'Last week',
  value: () => {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
    return [start, end]
  },
},
{
  text: 'Last month',
  value: () => {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
    return [start, end]
  },
},
{
  text: 'Last 3 months',
  value: () => {
    const end = new Date()
    const start = new Date()
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
    return [start, end]
  },
},
]
const tableData =reactive( [{  oNo: '123456',
name: '张三',
oName: '门诊挂号',
price: '100',
count: '1',
beginTime: '2022-01-01'
},{
name:'李四',
oName: '住院挂号',
  price: '200',
  count: '2',
  beginTime: '2022-01-02'
},{
  oName: '住院挂号',
  name:'王五',
  price: '200',
  count: '2',
  beginTime: '2022-01-02'
},{
  oName: '住院挂号',
  name:'王五',
  price: '200',
  count: '2',
  beginTime: '2022-01-02'
},{
  oName: '住院挂号',
  name:'王五',
  price: '200',
  count: '2',
  beginTime: '2022-01-02'
},{
  oName: '住院挂号',
  name:'王五',
  price: '200',
  count: '2',
  beginTime: '2022-01-02'
}
])
const form = reactive({
 orderNo:'',
 patientName:'',
 birthday:'',
 fangStatus:1,
 fangName:null
});
//清空表单函数
const resetForm=()=>{
for(const key in form){
  form[key]='';
}
};
const search=()=>{
};
const select=()=>{
};
const noPay=()=>{
  

};
const deleteMemory=()=>{
  
};
axiosInstance.get("/api/register/getOrderNo?id="+1).then(
response=>{
  console.log('success'+response.data);
  form.orderNo=response.data;
}
).catch(error=>{
console.log('error');
})


</script>






<style lang="css" link-ref="main.css"/>
<style scoped> 
h1{
  padding-left: 30px;
  
}
.label{
width: 200px;
 color: grey;
padding-left: 30px;

}
 
h3{
padding-left: 20px;
}
.demo-basic {
text-align: right;
}
.demo-basic .sub-title {
margin-bottom: 10px;
font-size: 14px;
color: var(--el-text-color-secondary);
}
.demo-basic .demo-basic--circle,
.demo-basic .demo-basic--square {
display: flex;
justify-content: flex-end;
align-items: right;
}
.demo-basic .block:not(:last-child) {
border-right: 1px solid var(--el-border-color);
}
.demo-basic .block {
flex: 1;
}
.demo-basic .el-col:not(:last-child) {
border-right: 1px solid var(--el-border-color);
}


</style>
 